<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>

        <style>

            .box1 {
                width: 200px;
                height: 200px;
                background-color: brown;

                float: left;
                /*float: right;*/
            }

            .box2 {
                width: 300px;
                height: 300px;
                background-color: cornflowerblue;

                float: left;
            }

            #box0 {
                height: 400px;
            }

            ul {
                list-style: none;

                width: 340px;
                height: 32px;
            }

            ul > li {
                float: left;

                padding: 5px 10px;
                background-color: #1479d7;
            }

            ul > li:hover {
                background-color: #cbe1ed;
            }

            ul > li a {
                text-decoration: none;
                color: white;
            }

            ul > li:hover a {
                color: #14539a;
            }

            .box3 {
                width: 200px;
                height: 200px;
                background-color: aquamarine;
                float:left;
                clear: both;
            }
        </style>
    </head>
    <body>
        <!-- 浏览器在解析渲染 html 页面是，页面标签会构成一个文档流
             
            浮动会破坏原先元素在文档流中的位置，位置会消失
            浮动会造成 没有设置高度的 父元素高度的崩塌（解决方法是设置父元素的高度）
        -->

        <!--<div id="box0">
            <div id="box1"></div>
        </div>
        -->
        <!-- <div class="box1">2</div>
        <div class="box1">1</div>
        <div class="box1">3</div>
        <div class="box1">4</div>
        <div class="box1">5</div> -->

        <ul>
            <li>
                <a href="https://www.baidu.com">百度云</a>
            </li>
            <li>
                <a href="https://www.baidu.com">百度云</a>
            </li>
            <li>
                <a href="https://www.baidu.com">百度云</a>
            </li>
            <li>
                <a href="https://www.baidu.com">百度云</a>
            </li>
            <li>
                <a href="https://www.baidu.com">百度云</a>
            </li>
        </ul>
        <!-- 此处若不设置父元素的高度或使用clear：both，且此处设置了浮动，那么将会使父元素的高度崩塌 -->
        <div class="box3"></div>
    </body>
</html>